<template>
    <div>
      <tab :line-width="1" custom-bar-width="60px" active-color="#33bb99">
        <tab-item selected @on-item-click="itemClick">全部</tab-item>
        <tab-item @on-item-click="itemClick">待确认</tab-item>
        <tab-item @on-item-click="itemClick">待发货</tab-item>
        <tab-item @on-item-click="itemClick">已发货</tab-item>
        <tab-item @on-item-click="itemClick">已签收</tab-item>
        <tab-item @on-item-click="itemClick">退货中</tab-item>
        <tab-item @on-item-click="itemClick">已退货</tab-item>
        <tab-item @on-item-click="itemClick">取消交易中</tab-item>
        <tab-item @on-item-click="itemClick">已取消</tab-item>
        <tab-item @on-item-click="itemClick">退货待确认</tab-item>
      </tab>
      <div class="order-text">
        <scroller lock-x height="89%" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
          <div class="box2">
            <div class="order" v-for="v in dataList">
              <div class="order-title">
                <div class="name"><i class="iconfont icon-dianpu"></i>{{v.company_name}}</span></div>
                <div class="time">{{v.create_time}}</div>
              </div>
              <div class="order-nr">
                <h5>订单号：{{v.order_no}}</h5>
                <div class="order-state">
                  <span style="margin-right: 1rem;"><i class="iconfont icon-dingdan"></i>{{v.order_status | statusFilter}}</span>
                  <span><i class="iconfont icon-dingdandaifukuan"></i>{{v.order_pay_status==0?'未付款':'已付款'}}</span>
                  <span></span>
                </div>
                <p><i class="iconfont icon-dizhi1"></i>{{v.province}}{{v.city}}{{v.area}}{{v.detail_address}}</p>
                <p :style="{color:v.remark?'#333':'#ccc'}"><i class="iconfont icon-beizhu"></i>{{v.remark?v.remark:'（暂无备注信息）'}}</p>
                <div class="pay">
                  <span class="price"><i class="iconfont icon-zhifufangshi"></i>￥<span>{{(v.order_total*1*1).toFixed(2)}}</span></span>
                  <span class="btn">
                    <!--<span v-if="v.order_status==0||v.order_status==1" @click="del(v)">取消交易</span>-->
                    <span class="log-btn" @click="viewOrderRecord(v)">订单操作记录</span>
                    <span @click="detail(v)" style="background: #33bb99;">订单详情</span>
                  </span>
                </div>
              </div>
            </div>
            <!--<load-more tip="loading"></load-more>-->
          </div>
        </scroller>
      </div>
      <!--订单详情-->
      <div v-transfer-dom style="background: #fff">
        <popup v-model="show" height="100%" style="background: rgb(251, 249, 254)">
          <orderDetail v-if="show" :detail="order" @toOrder="back1"></orderDetail>
        </popup>
      </div>
      <!--订单操作记录-->
      <div v-transfer-dom style="background: #fff">
        <popup v-model="isLog" height="100%" style="background: rgb(251, 249, 254)">
          <orderLog v-if="isLog" :detail="order" @toOrder="back1"></orderLog>
        </popup>
      </div>
    </div>
</template>

<script>
  import { Scroller, Tab, TabItem, LoadMore, Popup } from 'vux'
  import orderDetail from './Order-detail'
  import orderLog from './Order-log'
  export default {
    name: "Order",
    components:{
      Scroller, Tab, TabItem, LoadMore, Popup, orderDetail, orderLog
    },
    data () {
      return {
        show: false,
        start:1,
        dataList:[],
        pageSize: 0,
        totalPage: 0,
        totalRow: 0,
        isShow:false,
        orderState:'',
        isLog:false
      }
    },
    created(){
      this.getOrderList()
    },
    methods:{
      // 查看订单操作记录
      viewOrderRecord(v){
        this.isLog = true
        this.order = v
      },
      // tab选项
      itemClick(index){
        this.orderState = index-1
        if(this.orderState<0) this.orderState = ''
        this.dataList = []
        this.getOrderList()
      },
      // 查看订单详情
      detail(v){
        this.show = true
        this.order = v

      },
      back1(msg){
        this.dataList = []
        if(msg) this.getOrderList()
        this.show = false
        this.isLog = false
      },
      // 分页获取订单列表
      getOrderList(){
        this.$vux.loading.show();
        this.config0.get('/supply/appOrder/findPage', {
          start:this.start,
          start_time:'',
          end_time:'',
          payStatus:'',
          orderStatus:this.orderState,
          purchasersCompanyName:'',
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            $.each(res.data.page.list,(index,item)=>{
              this.dataList.push(item)
            })
            this.pageSize = res.data.pageSize,
            this.totalPage = res.data.totalPage,
            this.totalRow = res.data.totalRow,
            this.isShow = true
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },

      // scroll
      onScrollBottom () {
        if (this.onFetching) {
          // do nothing
        } else {
          // this.onFetching = true
          setTimeout(() => {
            // this.bottomCount += 10
            this.start += 1
            this.getOrderList()
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
            // this.onFetching = false
          }, 2000)
        }
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
    },
    filters: {
      statusFilter(value) {
        let str = '';
        if (value === '0') {
          str = '待确认';
        }
        if (value === '1') {
          str = '待发货';
        }
        if (value === '2') {
          str = '已发货';
        }
        if (value === '3') {
          str = '已签收';
        }
        if (value === '4') {
          str = '退货中';
        }
        if (value === '5') {
          str = '已退货';
        }
        if (value === '6') {
          str = '取消交易中';
        }
        if (value === '7') {
          str = '已取消';
        }
        if (value === '8') {
          str = '退货待确认';
        }
        return str;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .order{
    width: 95%;
    background: #fff;
    font-size: 0.8rem;
    border-radius: 0.3rem;
    margin: 0.8rem auto 0;
    box-shadow: 0 0 6px #ccc;
    .iconfont{
      color:#33bb99;
      font-weight: normal;
      font-size:1rem;
      padding-right:0.3rem;
    }
    .order-nr{
      padding: 0.5rem;
      .pay{
        display: flex;
        justify-content: space-between;
        line-height: 2rem;
        .price{
          color:#ff0000;
          font-size: 1rem;
          font-weight: 600;
        }
        .btn{
          color: #fff;
          span{
            margin-left: 0.5rem;
            background: #ffc655;
            display: inline-block;
            line-height:1.5rem;
            padding:0 0.5rem;
            border-radius: 5px;
          }
        }
      }
      h5,p{
        line-height: 1.5rem;
      }
      .order-state{
        display: flex;
        justify-content: space-between;
        span{
          width: 30%;
          color:#ff0000;
        }
      }
    }
    .order-title{
      line-height:2rem;
      border-bottom: 1px solid #33bb99;
      padding:0 0.4rem;
      display: flex;
      justify-content: space-between;
      div{
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;

      }
      .name{
        width: 67%;
      }
      .time{
        width: 33%;
        font-size: 0.6rem;
        text-align: right;
        color: #999;
      }
    }
  }
.order-text{
  height:100%;
  position: fixed;
  top:44px;
  bottom: 50px;
  width: 100%;
  padding-bottom:50px;
}
</style>
